﻿@model YogaStudio.WebUI.Models.CoursePaymentViewModel

@{
    ViewBag.Title = "Index";
}

<div class="main">
    <div class="content">
        <div class="section group">
            <div class="col span_2_of_3">
                <h3>Payment Details</h3>
                <hr />

                <div class="contact-form">
                    @using (Html.BeginForm())
                    {
                        @Html.AntiForgeryToken()

                        <div class="form-horizontal">

                            @Html.ValidationSummary(true)
                            @Html.HiddenFor(model => model.SectionId, new {@Value = ViewBag.SectionId})

                            <div class="layer1">
                                <a class="ourHeading btn-default" id="creditCardForm" href="#creditCardForm">Click to Expand/Collapse Credit Card Information</a>
                                <div class="content1">
                                    <div id="CreditCard">
                                        <div class="form-group">
                                            @Html.LabelFor(model => model.CreditCardNumber, new { @class = "control-label col-md-2" })
                                            <div class="col-md-10">
                                                @Html.EditorFor(model => model.CreditCardNumber)
                                                @Html.ValidationMessageFor(model => model.CreditCardNumber)
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            @Html.LabelFor(model => model.PrintedNameOnCard, new { @class = "control-label col-md-2" })
                                            <div class="col-md-10">
                                                @Html.EditorFor(model => model.PrintedNameOnCard)
                                                @Html.ValidationMessageFor(model => model.PrintedNameOnCard)
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            @Html.LabelFor(model => model.Pin, new { @class = "control-label col-md-2" })
                                            <div class="col-md-10">
                                                @Html.EditorFor(model => model.Pin)
                                                @Html.ValidationMessageFor(model => model.Pin)
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            @Html.LabelFor(model => model.ExpiryDate, new { @class = "control-label col-md-2" })
                                            <div class="col-md-10">
                                                @Html.EditorFor(model => model.ExpiryDate)
                                                @Html.ValidationMessageFor(model => model.ExpiryDate)
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <br />
                                <a class="ourHeading btn-default" id="billingForm" href="#billingForm">Click to Expand/Collapse Billing Address</a>
                                <div class="content1">
                                    <div id="Billing">
                                        <div class="form-group">
                                            @Html.LabelFor(model => model.BillingAddress1, new { @class = "control-label col-md-2" })
                                            <div class="col-md-10">
                                                @Html.EditorFor(model => model.BillingAddress1)
                                                @Html.ValidationMessageFor(model => model.BillingAddress1)
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            @Html.LabelFor(model => model.BillingAddress2, new { @class = "control-label col-md-2" })
                                            <div class="col-md-10">
                                                @Html.EditorFor(model => model.BillingAddress2)
                                                @Html.ValidationMessageFor(model => model.BillingAddress2)
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            @Html.LabelFor(model => model.BillingCity, new { @class = "control-label col-md-2" })
                                            <div class="col-md-10">
                                                @Html.EditorFor(model => model.BillingCity)
                                                @Html.ValidationMessageFor(model => model.BillingCity)
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            @Html.LabelFor(model => model.BillingProvience, new { @class = "control-label col-md-2" })
                                            <div class="col-md-10">
                                                @Html.EditorFor(model => model.BillingProvience)
                                                @Html.ValidationMessageFor(model => model.BillingProvience)
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            @Html.LabelFor(model => model.BillingPostalCode, new { @class = "control-label col-md-2" })
                                            <div class="col-md-10">
                                                @Html.EditorFor(model => model.BillingPostalCode)
                                                @Html.ValidationMessageFor(model => model.BillingPostalCode)
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            @Html.LabelFor(model => model.BillingCountry, new { @class = "control-label col-md-2" })
                                            <div class="col-md-10">
                                                @Html.EditorFor(model => model.BillingCountry)
                                                @Html.ValidationMessageFor(model => model.BillingCountry)
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <br />
                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-10">
                                    <input type="submit" value="Confirm Payment" class="btn btn-default" onclick="showAllDivs()" />
                                </div>
                            </div>
                        </div>
                    }

                </div>
            </div>
        </div>
    </div>
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
<script>
    jQuery(document).ready(function () {
        jQuery(".content1").hide();
        //toggle the componenet with class msg_body
        jQuery(".ourHeading").click(function () {
            jQuery(this).next(".content1").slideToggle(500).scrollTo('#billingAddress');
            //jQuery(this).next(".content1").display(NONE);
        });
    });


    function showAllDivs() {
        jQuery(".content1").show();
    }

</script>